<template>
	<view>
		<u-sticky bgColor="#fff">
		<u-tabs :current="index" :list="tabs" :scrollable="false" @change="onTabsChange"></u-tabs>
		  </u-sticky>
	  <view v-if="index === 0" class="interview-container">
	  	<!-- 标题区域 -->
	  	<view class="interview-header">
	  		<view class="header-content">
	  			<view class="header-icon">🔥</view>
	  			<view class="header-text">
	  				<text class="header-title">热门岗位</text>
	  				<text class="header-subtitle">选择你的目标岗位开始面试</text>
	  			</view>
	  		</view>
	  	</view>
	  	
	  	<!-- 岗位网格 -->
	  	<view class="position-grid">
	  		<view class="position-card" v-for="(postion, idx) in positions" :key="postion.id" @click="handleClickPosition(postion.id)">
	  			<view class="card-decoration"></view>
	  			<view class="card-icon">💼</view>
	  			<view class="card-name">{{postion.name}}</view>
	  			<view class="card-footer">
	  				<text class="start-text">开始面试</text>
	  				<text class="arrow">→</text>
	  			</view>
	  		</view>
	  	</view>
	  </view>
	  <view v-else class="report-container">
	  		<!-- 统计卡片区域 -->
	  		<view class="stats-section">
	  			<view class="stat-card stat-card-primary">
	  				<view class="stat-icon">📊</view>
	  				<view class="stat-info">
	  					<view class="stat-number">{{ reportList.length }}</view>
	  					<view class="stat-label">面试报告</view>
	  				</view>
	  			</view>
	  			<view class="stat-card stat-card-secondary">
	  				<view class="stat-icon">⭐</view>
	  				<view class="stat-info">
	  					<view class="stat-number">{{ averageScore.toFixed(1) }}</view>
	  					<view class="stat-label">平均分数</view>
	  				</view>
	  			</view>
	  		</view>
	  		
	  		<!-- 分数分布图 -->
	  		<view class="chart-section" v-if="reportList.length > 0">
	  			<view class="section-header">
	  				<view class="section-title">
	  					<text class="title-icon">📈</text>
	  					<text>分数趋势</text>
	  				</view>
	  			</view>
	  			<view class="score-bars">
	  				<view class="score-bar-item" v-for="(item, idx) in reportList" :key="idx">
	  					<view class="bar-info">
	  						<view class="bar-label">{{ item.positionName || '面试' }}</view>
	  						<view class="bar-date">{{ item.generateTime }}</view>
	  					</view>
	  					<view class="bar-container">
	  						<view class="bar-fill" :style="{ width: (item.overallScore || 0) + '%', backgroundColor: getScoreColor(item.overallScore) }">
	  							<view class="bar-shine"></view>
	  						</view>
	  					</view>
	  					<view class="bar-value" :style="{ color: getScoreColor(item.overallScore) }">{{ item.overallScore || 0 }}</view>
	  				</view>
	  			</view>
	  		</view>
		  		
	  		<!-- 报告列表 -->
	  		<view class="list-section">
	  			<view class="section-header">
	  				<view class="section-title">
	  					<text class="title-icon">📝</text>
	  					<text>报告列表</text>
	  				</view>
	  			</view>
	  			<view class="report-list">
	  				<view class="report-item" v-for="item in reportList" :key="item.id" @click="goReportDetail(item.id)">
	  					<!-- 顶部标签栏 -->
	  					<view class="report-header">
	  						<view class="header-left">
	  							<view class="position-badge" v-if="item.positionName">
	  								<text class="badge-icon">💼</text>
	  								<text>{{ item.positionName }}</text>
	  							</view>
	  							<view class="score-badge" :style="{ backgroundColor: getScoreColor(item.overallScore) }">
	  								<text class="score-number">{{ item.overallScore || 0 }}</text>
	  								<text class="score-text">分</text>
	  							</view>
	  						</view>
	  						<view class="header-right">
	  							<text class="report-date">{{ item.generateTime }}</text>
	  						</view>
	  					</view>
	  					
	  					<!-- 评价内容 -->
	  					<view class="report-content">
	  						<view class="content-item">
	  							<view class="content-label">💬 总体评价</view>
	  							<view class="content-value">{{ item.overallEvaluation || '暂无评价' }}</view>
	  						</view>
	  						<view class="content-item success-item" v-if="item.strengths && item.strengths !== '无可用信息'">
	  							<view class="content-label">✨ 优势亮点</view>
	  							<view class="content-value">{{ item.strengths }}</view>
	  						</view>
	  						<view class="content-item warning-item" v-if="item.weaknesses && item.weaknesses !== '未回答问题，缺乏技术展示和沟通意愿'">
	  							<view class="content-label">⚠️ 需要改进</view>
	  							<view class="content-value">{{ item.weaknesses }}</view>
	  						</view>
	  					</view>
	  					
	  					<!-- 底部操作 -->
	  					<view class="report-footer">
	  						<text class="detail-btn">查看完整报告</text>
	  						<text class="arrow-icon">→</text>
	  					</view>
	  				</view>
	  			</view>
	  		</view>
		  	</view>
		  </view>
</template>

<script>
	import { listAll,genQuestion } from '@/api/interview/position';
	export default {
		data() {
			return {
				index:0,
				tabs: [{
							name: '模拟面试',
						}, {
							name: '面试报告',
						}],
				positions:[],
				reportList: [] // 初始化reportList
			}
		},
		computed: {
			// 计算平均分数
			averageScore() {
				if(this.reportList.length === 0) return 0;
				const sum = this.reportList.reduce((acc, item) => acc + (item.overallScore || 0), 0);
				return sum / this.reportList.length;
			}
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo') || '';
			console.log('当前用户ID:', userInfo.id);	
		},
		methods: {
			// 根据分数获取颜色
			getScoreColor(score) {
				if(!score || score === 0) return '#95a5a6';
				if(score >= 80) return '#27ae60';
				if(score >= 60) return '#f39c12';
				return '#e74c3c';
			},
			onTabsChange(e){
				this.index = e.index
				if(e.index === 1){
					// 切换到报告标签时，仅在下方展示列表（不跳详情）
					this.loadReportList()
				}
			},
			
			loadReportList(){
				// 获取当前用户ID，这里假设从本地存储获取
				const userInfo = uni.getStorageSync('userInfo') || '';
				const userId = userInfo.id;
				if(!userId){
					console.error('无法获取用户ID');
					return;
				}
				
				import('@/api/interview/report.js').then(mod =>{
					mod.listReports(userId).then(res =>{
						console.log('用户报告列表响应:', res);
						this.reportList = res.data || []
					}).catch(err => {
						console.error('获取用户报告列表失败:', err);
					})
				}).catch(err => {
					console.error('导入report模块失败:', err);
				})
			},
			getPositions(){
				listAll().then(res =>{
					this.positions = res.data
					console.log("positions:",this.positions)
				})
			},
			handleClickPosition(positionId){
				console.log("positionId:", positionId)
				//调用接口，生成一次面试记录，获取面试题，并缓存
				genQuestion(positionId).then(res=>{
					uni.setStorageSync("interviewRecord",res.data);
						//跳转页面
						uni.navigateTo({
							url:"/pages/answer/answer"
						})
				})
			
				
			},
			goReportDetail(id){
				uni.navigateTo({
					url: '/pages/report/detail?id=' + id
				})
			}
		},
		onLoad() {
			//自动加载岗位列表
			this.getPositions();
		}
	}
</script>

<style lang="scss">
// 面试容器
.interview-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #f8f9ff 0%, #f5f7fa 100%);
	padding: 30rpx;
}

// 头部区域
.interview-header {
	margin-bottom: 40rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.header-content {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.header-icon {
	font-size: 64rpx;
	line-height: 1;
	filter: drop-shadow(0 4rpx 8rpx rgba(255, 87, 34, 0.3));
}

.header-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #2c3e50;
	letter-spacing: 1rpx;
}

.header-subtitle {
	font-size: 24rpx;
	color: #95a5a6;
}

// 岗位网格
.position-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
}

// 岗位卡片
.position-card {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 35rpx 25rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
	border: 2rpx solid transparent;
}

.card-decoration {
	position: absolute;
	top: -50rpx;
	right: -50rpx;
	width: 150rpx;
	height: 150rpx;
	background: linear-gradient(135deg, rgba(30, 136, 229, 0.12) 0%, rgba(21, 101, 192, 0.12) 100%);
	border-radius: 50%;
	filter: blur(30rpx);
}

.card-icon {
	font-size: 72rpx;
	line-height: 1;
	margin-top: 10rpx;
	filter: drop-shadow(0 4rpx 12rpx rgba(0, 0, 0, 0.1));
	position: relative;
	z-index: 1;
}

.card-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #2c3e50;
	text-align: center;
	letter-spacing: 1rpx;
	position: relative;
	z-index: 1;
}

.card-footer {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 24rpx;
	background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
	border-radius: 20rpx;
	margin-top: 10rpx;
	position: relative;
	z-index: 1;
	box-shadow: 0 4rpx 16rpx rgba(30, 136, 229, 0.4);
}

.start-text {
	font-size: 24rpx;
	font-weight: 600;
	color: #fff;
	letter-spacing: 1rpx;
}

.arrow {
	font-size: 28rpx;
	font-weight: bold;
	color: #fff;
	transition: transform 0.3s;
}

.position-card:active .arrow {
	transform: translateX(6rpx);
}

.position-card:active {
	transform: translateY(-8rpx) scale(0.98);
	box-shadow: 0 12rpx 40rpx rgba(30, 136, 229, 0.3);
	border-color: rgba(30, 136, 229, 0.25);
}

// 报告页面样式
.report-container {
	padding: 30rpx;
	background: linear-gradient(180deg, #f8f9ff 0%, #f5f7fa 100%);
	min-height: 100vh;
}

// 统计卡片
.stats-section {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.stat-card {
	flex: 1;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	gap: 20rpx;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	
	&:active {
		transform: translateY(-4rpx) scale(0.98);
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
	}
}

.stat-card-primary {
	background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
}

.stat-card-secondary {
	background: linear-gradient(135deg, #26c6da 0%, #00acc1 100%);
}

.stat-icon {
	font-size: 56rpx;
	line-height: 1;
}

.stat-info {
	flex: 1;
}

.stat-number {
	font-size: 52rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 6rpx;
	line-height: 1.1;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.stat-label {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.95);
	font-weight: 500;
	letter-spacing: 1rpx;
}

// 图表区域
.chart-section {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 35rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.section-header {
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #2c3e50;
	display: flex;
	align-items: center;
	gap: 12rpx;
	
	.title-icon {
		font-size: 36rpx;
		line-height: 1;
	}
}

.score-bars {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.score-bar-item {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.bar-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bar-label {
	font-size: 26rpx;
	color: #34495e;
	font-weight: 600;
}

.bar-date {
	font-size: 22rpx;
	color: #95a5a6;
}

.bar-container {
	position: relative;
	height: 36rpx;
	background-color: #f0f3f8;
	border-radius: 18rpx;
	overflow: hidden;
	box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
}

.bar-fill {
	height: 100%;
	border-radius: 18rpx;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.bar-shine {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
	border-radius: 18rpx 18rpx 0 0;
}

.bar-value {
	text-align: center;
	font-size: 28rpx;
	font-weight: bold;
	margin-top: 8rpx;
}

// 列表区域
.list-section {
	background-color: transparent;
	padding: 0;
}

.report-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.report-item {
	background-color: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
	
	&:active {
		transform: translateY(-4rpx) scale(0.98);
		box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.2);
		border-color: rgba(102, 126, 234, 0.1);
	}
}

.report-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 30rpx;
	background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
	border-bottom: 2rpx solid #f0f3f8;
}

.header-left {
	display: flex;
	gap: 12rpx;
	align-items: center;
	flex: 1;
}

.position-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 10rpx 18rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
	background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(30, 136, 229, 0.35);
	
	.badge-icon {
		font-size: 28rpx;
		line-height: 1;
	}
}

.score-badge {
	display: flex;
	align-items: baseline;
	gap: 4rpx;
	padding: 10rpx 18rpx;
	border-radius: 20rpx;
	font-weight: bold;
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	
	.score-number {
		font-size: 28rpx;
	}
	
	.score-text {
		font-size: 20rpx;
	}
}

.header-right {
	margin-left: 12rpx;
}

.report-date {
	font-size: 22rpx;
	color: #95a5a6;
	white-space: nowrap;
}

.report-content {
	padding: 25rpx 30rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.content-item {
	padding: 20rpx;
	border-radius: 16rpx;
	background-color: #f8f9ff;
	border-left: 4rpx solid #667eea;
}

.content-item.success-item {
	background-color: #f0fdf4;
	border-left-color: #27ae60;
}

.content-item.warning-item {
	background-color: #fef2f2;
	border-left-color: #e74c3c;
}

.content-label {
	font-size: 24rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 12rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.content-value {
	font-size: 26rpx;
	color: #5a6c7d;
	line-height: 1.7;
	word-break: break-all;
}

.report-footer {
	padding: 20rpx 30rpx;
	background-color: #fafbfc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 2rpx solid #f0f3f8;
}

.detail-btn {
	font-size: 26rpx;
	color: #1e88e5;
	font-weight: 600;
}

.arrow-icon {
	font-size: 32rpx;
	color: #1e88e5;
	font-weight: bold;
	transition: transform 0.3s;
}

.report-item:active .arrow-icon {
	transform: translateX(8rpx);
}

</style>